<template>
  <TresCanvas v-bind="gl" ref="canvasRef">
    <TresPerspectiveCamera :position="[30, -30, 20]" />
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight :position="[1, 1, 1]" :intensity="0.5" />
    <Grid />

    <!-- <Elements /> -->
    <OrbitControls ref="controls" />
    <TransformControls v-if="mesh" ref="transformControls" :object="mesh" />
  </TresCanvas>
</template>

<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, TransformControls } from '@tresjs/cientos'
import { use3DEditorStore, useSceneStore } from '@/store'
import { storeToRefs } from 'pinia'
import Grid from './Grid.vue'
import useKeyboard from '../hooks/useKeyboard'
import Elements from './element/index.vue'

const sceneStore = useSceneStore()
const { isCreating, isEditing, handleElement } = storeToRefs(use3DEditorStore())
const canvasRef = shallowRef<InstanceType<typeof TresCanvas>>()
const controls = shallowRef<InstanceType<typeof OrbitControls>>()
const transformControls = shallowRef<InstanceType<typeof TransformControls>>()
// const objectRef = computed(() => handleElement.value?.ref)
// @ts-ignore
const { mesh } = useKeyboard()

const gl = {
  clearColor: '#ffffff',
}

onMounted(() => {
  // watch(
  //   () => [isCreating.value, isEditing.value],
  //   () => {
  //     if (!controls.value && !controls.value.instance) return

  //     const val = !(isCreating.value || isEditing.value)

  //     controls.value.instance.enabled = val
  //   },
  // )
  if (canvasRef.value) {
    // @ts-ignore
    sceneStore.setScene(canvasRef.value.context.scene.value)
    // @ts-ignore
    canvasRef.value.context.camera.value.up.set(0, 0, 1)
  }
})
</script>

<style></style>
